<!DOCTYPE html>
<html lang="en">
<head>
    <%include head.ejs%>
</head>
<style>
    body {
        padding-top: 70px;
        min-height: 2000px;
        position: relative;
    }

    .modal-header {
        background-color: #2f4154;
    }

    .divAddMessage {
        position: fixed;
        bottom: 10px;
        left: 10px;
        z-index: 9999;
    }

    #messageForm span {
        display: none;
    }

</style>
<body data-spy="scroll" data-target=".navbar">
<%include nav.ejs%>

<div class="modal" id="modal-addMessage" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title text-center" id="myModalLabel">
                    <img src="img/icons/svg/clipboard.svg" alt=""/>
                </h4>
            </div>
            <div class="modal-body">

                <div class="row">
                    <div class="col-md-12">
                        <h4 class="text-center">您的留言</h4>

                        <form id="messageForm" class="form">

                            <div id="usernameGroup" class="form-group has-feedback">
                                <input type="text" class="form-control" placeholder="昵称(1-10位)" id="username"
                                       name="username" aria-describedby="usernameStatus">
                                <span id="usernameSuccess" class="iconfont icon-ok form-control-feedback"
                                      aria-hidden="true"></span>
                                <span id="usernameError" class="iconfont icon-home form-control-feedback"
                                      aria-hidden="true"></span>
                                <span id="usernameStatus" class="sr-only">(message)</span>
                            </div>

                            <div id="contentGroup" class="form-group">
                                <textarea placeholder="内容" id="content" name="content" class="form-control"
                                          rows="3"></textarea>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btnSaveMessage">提交</button>
            </div>
        </div>

    </div>

</div>

<!--添加留言按钮-->
<div class="divAddMessage">
    <a id="btnAddMessage" href="#modal-addMessage" role="button" class="btn btn-primary" data-toggle="modal">发一条</a>
</div>

<!--留言列表-->
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                       <i>1 - </i>
                       <b>东方北斗技术部</b>
                    </h3>
                </div>
                <div class="panel-body">
                    <div class="col-xs-4 column">
                        <img src="img/icons/svg/Book.svg" class="img-circle" alt=""/>
                    </div>
                    <div class="col-xs-8 column">
                        <p>欢迎使用留言板</p>
                    </div>

                </div>
                <div class="panel-footer">
                    2015-2-6 15:24:37
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel title
                    </h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
                <div class="panel-footer">
                    Panel footer
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel title
                    </h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
                <div class="panel-footer">
                    Panel footer
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel title
                    </h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
                <div class="panel-footer">
                    Panel footer
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel title
                    </h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
                <div class="panel-footer">
                    Panel footer
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        Panel title
                    </h3>
                </div>
                <div class="panel-body">
                    Panel content
                </div>
                <div class="panel-footer">
                    Panel footer
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /.container -->

<!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/plugins/nprogress.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/vendor/video.js"></script>
<!--<script src="js/flat-ui.js"></script>-->
<script src="js/flat-ui.min.js"></script>
</body>
<script>
    $(function () {
        //--------------------------------------------------------------------------------------------
        //提交添加留言的请求
        $('#btnSaveMessage').on('click', function () {

            NProgress.configure({
                parent: '.modal-footer'
            });

            if (isValidPass()) {
                NProgress.start();
                setTimeout(function () {
                    NProgress.done();
                    alert('提交成功');
                    resetModal();
                }, 2000);
            }

        });

        //--------------------------------------------------------------------------------------------
        //简单的表单验证，不使用插件

        //用户名验证
        //允许使用的字符范围为：26个大小写字母、0-9的数字、中文、下划线
        var usernameRegex = /^[A-Za-z0-9\u4e00-\u9fa5_]{1,10}$/;
        $('#username').on('blur', function () {
            var val = $(this).val();
            var $formGroup = $(this).parent();

            //根据验证情况，则改变样式
            if (usernameRegex.exec(val)) {
                $formGroup.removeClass('has-error').addClass('has-success').children('#usernameSuccess').show().siblings('span').hide();
            } else {
                $formGroup.removeClass('has-success').addClass('has-error').children('#usernameError').show().siblings('span').hide();
            }
        });

        //内容验证
        //允许使用的范围为：非空字符
        var contentRegex = /\S+/;
        $('#content').on('blur', function () {
            var val = $(this).val();
            var $formGroup = $(this).parent();

            if (contentRegex.exec(val)) {
                $($formGroup).removeClass('has-error').addClass('has-success');
            } else {
                $($formGroup).removeClass('has-success').addClass('has-error');
            }

        });

        //判断是否满足提交要求
        function isValidPass() {
            return $('#usernameGroup').hasClass('has-success') && $('#contentGroup').hasClass('has-success');
        }

        //----------------------------------------------------------------------------------------------
        //重置留言表单
        function resetModal() {

            //把值设为空
            $('#username').val('');
            $('#content').val('');

            //把样式取消
            $('#usernameGroup').removeClass('has-error has-success').children('.form-control-feedback').hide();
            $('#contentGroup').removeClass('has-error has-success');

        }
    });
</script>
</html>
